<template>
  <div>
    <div>
      <div class="df aic jcsb">
        <Card v-for="item in cardData" :key="item.name" :item="item" />
      </div>
      <div class="echarts" ref="line"></div>
    </div>
  </div>
</template>

<script>
import { api_order_totaldata } from "@/api/order";
import Card from "./Card.vue";
import * as echarts from "echarts";

export default {
  data() {
    return {
      cardData: [],
    };
  },
  components: {
    Card,
  },
  methods: {
    async getOrder() {
      let res = await api_order_totaldata();

      let {
        xData,
        orderData,
        amountData,
        totalOrder,
        totalAmount,
        todayOrder,
        totayAmount,
      } = res.data;
      let tep = [
        {
          name: "总订单",
          data: totalOrder,
          img: require("@/assets/imgs/kunkun.jpeg"),
        },
        {
          name: "总销售额",
          data: totalAmount,
          img: require("@/assets/imgs/kunkun.jpeg"),
        },
        {
          name: "今日订单数",
          data: todayOrder,
          img: require("@/assets/imgs/kunkun.jpeg"),
        },
        {
          name: "今日销售额",
          data: totayAmount,
          img: require("@/assets/imgs/kunkun.jpeg"),
        },
      ];
      this.cardData = tep;
      // 处理数据
      let series = [
        {
          type: "line",
          name: "金额数据",
          data: amountData,
        },
        {
          type: "line",
          name: "订单数据",
          data: orderData,
        },
      ];
      // 画图
      this.renderLine({
        series,
        xData,
      });
    },
    // 画图
    renderLine(obj) {
      let myChart = echarts.init(this.$refs.line);
      // 配置项
      let options = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: obj.xData,
        },
        yAxis: {
          type: "value",
        },
        series: obj.series,
      };
      // 绘制图片
      myChart.setOption(options);
    },
  },
  mounted() {
    this.getOrder();
  },
};
</script>

<style lang="scss" scoped>
.echarts {
  height: 400px;
  margin-top: 50px;
  background: white;
}
</style>